<template>
  <div class="order">
    <h3>订单列表</h3>
    <div class="table">
      <el-table :data="tableData.list" stripe style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="180" />
      <el-table-column prop="name" label="订单商品" width="140" />
      <el-table-column prop="price" label="订单金额" width="120" />
      <el-table-column prop="date" label="下单时间" width="140" />
      <el-table-column prop="phone" label="用户账号" width="140px"/>
      <el-table-column prop="way" label="支付方式" width="120px"/>
      <el-table-column prop="status" label="订单状态" width="120px"/>
      <el-table-column prop="data" label="操作" >
        <template #default="scope">
          <el-button type="success" :icon="Share"  size="small" @click="watchRow(scope.row)"/>
          <!-- <el-button link type="primary"  @click.prevent="watchRow(scope.row)">查看订单</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { onMounted, reactive} from 'vue'
import axios from 'axios'

import { useRouter } from 'vue-router'
//实例化路由管理对象
var $router = useRouter();

//定义响应式数据
var tableData = reactive({ list: [] })


onMounted(() => {
  axios.get('/api/order/list').then((res) => {
    tableData.list = res.data.list;
    console.log(tableData.list)
  })
})


var watchRow = (row) => {
  console.log(row.status)
  if(row.status == "待付款"){
    $router.push({path:'/maxindex/waitpay/',query:{id:JSON.stringify(row)}})
  }else if(row.status == "待发货"){
    $router.push({path:'/maxindex/waitgoods/',query:{id:JSON.stringify(row)}})
  }else if(row.status == "已发货"){
    $router.push({path:'/maxindex/finishgoods/',query:{id:JSON.stringify(row)}})
  }
}

</script>

<style>
.el-main>.order{
  margin-top: 30px;
  width: 90%;
  margin: 0 auto;
  /* background-color: #; */
}
.el-main>.order>h3{
  line-height: 100px;
  padding-left: 20px;
  background-color: #f2f2f2;
  margin: 30px 0px;

}
.el-main>.order>.table .el-table__inner-wrapper{
  position: fixed;
}
</style>